import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { NzMessageService } from 'ng-zorro-antd';
import { FetchService } from '../../../../core/net/fetch.service';
import * as moment from 'moment';
import * as _ from 'lodash';

@Component({
  selector: 'app-wt-drain-flow',
  templateUrl: './wt-drain-flow.component.html',
  styleUrls: ['./wt-drain-flow.component.scss']
})
export class WtDrainFlowComponent implements OnInit {
    searchForm: FormGroup;
    basicLineOpts: any = {
        title: {
            text: '引黄灌区排水沟排水过程线',
            x: 'center',
            textStyle: {
                color: '#777',
                fontSize: 16
            }
        },
        color: ['#3398DB', '#ddb00a'],
        grid: {
            top: '10%',
            left: '3%',
            right: '4%',
            bottom: '8%',
            containLabel: true
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            name: "流量(m³/s)",
            type: "value"
        }
    };
    drainChartOpts: any = {};
    tableData: Array<any> = [];
    widthConfig = ['150px', '80px'];
    scrollConfig =  {
        x: '1590px'
    };
    tableFirstHead: Array<any> = [];
    tableSecondHead: Array<any> = [];
    loading = false;

    constructor(private fb: FormBuilder,
                private message: NzMessageService,
                private fetchService: FetchService) {
        this.searchForm = this.fb.group({
            rangePickerTime: [[moment().subtract(1, 'months').startOf('month').valueOf(), new Date()]]
        });
    }

    ngOnInit(): void {
        this.queryInfo();
    }

    queryInfo(): void {
        this.loading = true;
        this.tableSecondHead = [];
        this.widthConfig = ['150px', '80px'];
        const params = {
            beginTime: moment(this.searchForm.value.rangePickerTime[0]).format('YYYY-MM-DD'),
            endTime: moment(this.searchForm.value.rangePickerTime[1]).format('YYYY-MM-DD')
        };
        this.fetchService.post('base/wrsBrwaterDrainage/queryListByTime', params).subscribe(res => {
            // this.tableData = res['data'];
            // this.tableHead = res['reportDrainages'];
            const colGroup = _.groupBy(res['reportDrainages'], 'county');
            this.tableFirstHead = Object.keys(colGroup).map(countyName => {
                colGroup[countyName].forEach(drain => {
                    this.tableSecondHead.push({
                        id: drain.id,
                        name: drain.name
                    });
                    this.widthConfig.push('80px');
                });
                return {
                    name: countyName,
                    colspan: colGroup[countyName].length
                };
            });

            this.tableData = _.reverse(_.cloneDeep(res['data']));

            this.drainChartOpts = {
                xAxis: {
                    data: res['data'].map(item => {
                        return item.meaTime;
                    })
                },
                series: [
                    {
                        name: '流量（m³/s）',
                        type: 'line',
                        smooth: true,
                        data: res['data'].map(item => {
                            return item.total;
                        })
                    }
                ]
            };
            this.loading = false;
        });
    }

    getTableColData(list, id): string {
        const data = _.find(list, item => {
            return item.id === id;
        });
        return data ? data.flux : '--';
    }
}
